<template>
  <div class="fundHome">
    <assets-head :title="$t('基金理财')"></assets-head>
    <div class="box-border px-30 mt-42">
      <div class="flex justify-between text-grey relative">
        <div class="flex flex-col">
          <span class="text-grey font-30">{{ $t('托管金额') }}（USDT）</span>
          <span class="font-66 mt-20 font-700 textColor">{{ statiscis.amount_sum }}</span>
        </div>
      </div>
      <div class="flex mt-44 justify-between font-26 lh-32 mb-35">
        <div class="flex flex-col ">
          <div class="text-grey font-26">{{ $t('预计日收益') }}（USDT）</div>
          <div class="font-40 mt-17 mb-9  font-36 textColor">{{ statiscis.today_profit }}</div>
        </div>
        <div class="flex flex-col">
          <div class="text-grey font-26">{{ $t('累计收益') }}（USDT）</div>
          <div class="font-40 mt-17 mb-9 font-36 textColor">{{ statiscis.aready_profit }}</div>
        </div>
        <div class="flex flex-col">
          <div class="text-grey font-26">{{ $t('托管订单') }}（USDT）</div>
          <div class="font-40 mt-17 mb-9 font-36 textColor">{{ statiscis.order_sum }}</div>
        </div>
      </div>
    </div>
    <div class="flex justify-between box-border px-30 mt-43">
      <div @click="$router.push('/funds?tab=3&index=0')"
        class="greyBg text-grey w-370 h-75 lh-75 rounded-lg font-27 text-center mr-20 active">{{ $t('托管订单') }}</div>
      <div @click="$router.push('/fund-rule')" class="greyBg text-grey w-370 h-75 lh-75 rounded-lg font-27 text-center">
        {{ $t('规则') }}</div>
    </div>
    <div class="px-30 mt-40 pb-80">
      <div v-for="(item, index) in list" :key="index"
        class="card flex justify-between items-center relative rounded-lg borderColor contBackground">
        <div class="title absolute px-16 py-8 font-26 text-white bg-green top-0 left-22">{{ $t('日收益率')
        }} <span class="ml-8">{{ item.daily_rate }}%</span></div>
        <div class="flex justify-center items-center">
          <img class="w-120 h-130 mr-20" :src="replaceUrl(item.img)" alt="">
          <div class="flex flex-col items-start">
            <span class="font-35 font-600 textColor">
              <template v-if="$i18n.locale === 'CN'">
                {{ item.name_cn }}
              </template>
              <template v-else-if="$i18n.locale === 'zh-CN'">
                {{ item.name }}
              </template>
              <template v-else>
                {{ item.name_en }}
              </template>
            </span>
            <span class="font-26 mt-24 mb-16 textColor">{{ $t('限额') }} {{ item.investment_min + ' ~ ' +
              item.investment_max }}
              USDT</span>
            <span class="font-26 textColor">{{ $t('周期') }} {{ item.cycle }} {{ $t('天') }}</span>
          </div>
        </div>
        <div v-if="item.state==1" @click="$router.push({
          path: '/fund-buy',
          query: {
            ...item
          }
        })" class="active py-16 px-30 font-30 font-600 rounded-lg">{{ $t('立即买入') }}</div>
        <div v-if="item.state == 0" class="active py-16 px-30 font-30 font-600 rounded-lg">{{ $t('维护中') }}</div>
      </div>
    </div>
  </div>
</template>

<script>
import assetsHead from "@/components/assets-head";
import { financeStatics, getfinacialProductsList } from "@/API/financialManagement";
import { HOST_URL } from "@/config";
import {mapGetters} from "vuex";
export default {
  name: "fundHome",
  components: {
    assetsHead,
  },
  data() {
    return {
      HOST_URL,
      statiscis: {},
      list: []
    }
  },
  activated() {
    getfinacialProductsList().then(res => {
      this.list = res.data
    })
    if(this.userInfo.token){
      financeStatics().then(res => {
        this.statiscis = res.data
      })
    }

  },
  created() {
    getfinacialProductsList().then(res => {
      this.list = res.data
    })
    if(this.userInfo.token){
      financeStatics().then(res => {
        this.statiscis = res.data
      })
    }
  },
  computed:{
    ...mapGetters('user', ['userInfo']),
  },
  methods:{
    //图片地址读取当前域名
    replaceUrl(val) {
      const oldUrl = val.replace(/^https:\/\/[^/]+/, "")
      const nowUrl = this.HOST_URL
      return nowUrl + oldUrl
    },
  }
}
</script>

<style lang="scss" scoped>
.fundHome {
  width: 100%;
  box-sizing: border-box;
}

.active {
  color: #FFFFFF;

  @include themify() {
    background: themed("btn_main") !important;
  }

  @include themify() {
    border-color: themed("btn_main") !important;
  }

}

.title {
  border-radius: 0 0 8px 8px;
}

.card {
  padding: 80px 22px 22px 22px;
  margin-bottom: 32px;
}
</style>
